<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>点击我发送get请求的ajax</button>
  <script>
    let btn = document.querySelector("button");
    btn.onclick = function () {
      // 发送ajax
      let xhr = new XMLHttpRequest();
      // 如果是IE8及一下new ActiveXobject();
      console.log(xhr.readyState); // 初始化了，但是每调用open方法
      xhr.open("get", "/get?name=chengyu&age=22");
      console.log(xhr.readyState); // open调用了，还没有send();
      xhr.send();

      // xhr.onreadystatechange = function(){
      //     // 可以捕捉到 readyState的  2 、3 4 的状态
      //     console.log(xhr.readyState);
      //     if(xhr.readyState===4 && xhr.status>=200 && xhr.status<300){
      //         console.log(xhr.status);
      //         // 证明返还成功,获取结果值
      //         console.log(xhr.responseText);
      //     }
      // }

      xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 300) {
          console.log(xhr.readyState);
          console.log(xhr.responseText);
        }
      }
    }

    /*
      发送ajax的时候会有5种状态的变化，可以通过xhr.readyState来查看
      0：xhr 初始化了，但是每调用open
      1：xhr 已经调用了open方法，但是还没有调用send方法。send的时候就会发送http请求
      2：ajax 已经发送成功，等待服务器处理
         通过一个事件来捕获readyState的变化
      3：服务器部分处理完毕，返还头部已经可以使用
      4：服务器返回成功
      // 使用最多的状态是 4  
    */
    /*
      除了判断ajax的状态之后，还需要判断http的状态码；
      通过ajax 获取http的状态码 ，服务器返还的状态码
      xhr.status
      1xx : 和等待有关
      2xx : 和成功有关
      3xx : 和重定向有关
      4xx : 和资源错误有关
      5xx : 和服务器错误有关
    */
  </script>
</body>

</html>